import React from 'react'
import { Button, Icon, message, Upload } from 'antd'
import { FormattedMessage } from 'react-intl'

const AnswerUploadBox = ({name, action, userAnswerZipUrl, uploadFileSuccess}) => {
  const props = {
    name: name || 'file',
    action: action || '../api/simpleCodingQuizzes/users/answerFile',
    beforeUpload (file) {
      if (!isZipSuffix(file.name)) {
        message.error('file is not in zip format')
        return false
      }
      const isLt5M = file.size / 1024 / 1024 > 5
      if (isLt5M) {
        message.error('file must smaller than 5MB!')
        return false
      }
    },
    onChange (info) {
      if (info.file.status === 'done') {
        uploadFileSuccess(info.file)
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`)
      }
    }

  }
  const isZipSuffix = (str) => {
    return str.endsWith('.zip')
  }
  return (
    <div>
      <div className='upload-style'>
        <Upload {...props}>
          <Button>
            <Icon className='react-markdown-icon' type='cloud-upload' theme='outlined' />
            <FormattedMessage id='上传作业' />
          </Button>
        </Upload>
      </div>
      <div className='download-style'>
        {userAnswerZipUrl ? <a href={userAnswerZipUrl} > <FormattedMessage id='查看已提交作业' /></a> : ''}
      </div>
      <div className='upload-message'><FormattedMessage id='提交作业为zip压缩格式' /></div>
    </div>
  )
}

export default AnswerUploadBox
